<template>
  <div class="whiteBac mt10 p20 fs14">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号名称">
        <el-input :disabled="isDisabled" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="账号头像" prop="header">
        <div class="fl">
          <el-upload
            class="avatar-uploader header-img"
            accept="image/gif,image/jpeg,image/jpg,image/bmp,image/png"
            :action="uploadFileAction"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="headerSuccess">
            <img v-if="ruleForm.headerUrl" :src="ruleForm.headerUrl" class="avatar">
            <i v-else class="el-icon-plus header-img-icon"></i>
          </el-upload>
        </div>
        <div class="fl a-tip" style="margin-top: 30px;">请上传50*50的图片</div>
        <div class="clear"></div>
      </el-form-item>

      <!--<el-form-item label="PC背景图片" prop="pcBacPic">-->
        <!--<div class="fl">-->
          <!--<el-upload-->
            <!--class="avatar-uploader"-->
            <!--:action="uploadFileAction"-->
            <!--:show-file-list="false"-->
            <!--:on-success="pcSuccess">-->
            <!--<img v-if="ruleForm.pcBacPicUrl" :src="ruleForm.pcBacPicUrl" class="avatar">-->
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
        <!--</div>-->
        <!--<div class="fl a-tip">请上传150*120的图片</div>-->
        <!--<div class="clear"></div>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="APP背景图片" prop="appBacPic">-->
        <!--<div class="fl">-->
          <!--<el-upload-->
            <!--class="avatar-uploader"-->
            <!--:action="uploadFileAction"-->
            <!--:show-file-list="false"-->
            <!--:on-success="appSuccess">-->
            <!--<img v-if="ruleForm.appBacPicUrl" :src="ruleForm.appBacPicUrl" class="avatar">-->
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
        <!--</div>-->
        <!--<div class="fl a-tip">请上传150*120的图片</div>-->
        <!--<div class="clear"></div>-->
      <!--</el-form-item>-->

      <el-form-item label="简介" prop="desc">
        <el-input type="textarea" :maxlength="124" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="公众号" prop="tel">
        <el-input v-model="ruleForm.tel" :maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="客服邮箱" prop="email">
        <el-input v-model="ruleForm.email" :maxlength="50"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="isDisabledSave" @click="submitForm('ruleForm')">保存</el-button>
        <el-button type="info" @click="returnMain">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import service from '@/service/index'
  import { setCookie,getCookie,delCookie,validateMailbox,validateNumber } from '@/base/utils'
    export default {
        data() {
            return {
              isDisabledSave:false,
              agentInfo:{},
              isDisabled:true,
              imageUrl:'',
              ruleForm:{
                name:'',
                headerUrl:'',
                pcBacPicUrl:'',
                appBacPicUrl:'',
                paramsHeader:'',
                paramsPc:'',
                paramsApp:'',
                desc:'',
                tel:'',
                email:''
              },
              uploadFileAction:service.haiBeiServerUpload(),
              rules:{
                headerUrl: [
                  { required: true, message: '请选择头像', trigger: 'change' }
                ],
                pcBacPicUrl: [
                  { required: true, message: '请选择PC背景图片', trigger: 'change' }
                ],
                appBacPicUrl: [
                  { required: true, message: '请选择APP背景图片', trigger: 'change' }
                ],
                desc: [
                  { required: true, message: '请输入简介', trigger: 'blur' },
                  { min: 1, max: 124, message: '长度在 1 到 124 个字符', trigger: 'blur' }
                ],
                tel: [
                  { required: true, message: '请输入公众号', trigger: 'blur' },
                  { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                ],
                email: [
                  { required: true, message: '请输入客服邮箱', trigger: 'blur' },
                  { validator: validateMailbox, trigger: 'blur' }
                ]
              }
            };
        },
        mounted() {
          this.queryAgentInfo();
        },
        methods: {
          headerSuccess(res, file){
            this.ruleForm.headerUrl = res.url;
          },
          beforeAvatarUpload(file) {
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!isLt5M) {
              this.$message.error('上传图片大小不能超过5M!');
            }
            return isLt5M ;
          },
          pcSuccess(res, file){
            this.ruleForm.pcBacPicUrl = res.url;
          },
          appSuccess(res, file){
            this.ruleForm.appBacPicUrl = res.url;
          },
          queryAgentInfo(){
            service.haiBeiServerQueryAgentInfo({}).then(res => {
              if (res.success) {
                //console.log(JSON.stringify(res.result));
                this.agentInfo = res.result;
                this.ruleForm.name=res.result.name;
                this.ruleForm.headerUrl=res.result.head_img;
                this.ruleForm.pcBacPicUrl=res.result.pc_bg;
                this.ruleForm.appBacPicUrl=res.result.app_bg;
                this.ruleForm.desc=res.result.simple_desc;
                this.ruleForm.tel=res.result.customer_phone;
                this.ruleForm.email=res.result.customer_email;
              }else{
                this.$message({type:'error', message:res.msg});
                return;
              }
            });
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let params = {
                  head_img:this.ruleForm.headerUrl,
                  pc_bg:this.ruleForm.headerUrl,
                  app_bg:this.ruleForm.headerUrl,
                  simple_desc:this.ruleForm.desc,
                  customer_phone:this.ruleForm.tel,
                  customer_email:this.ruleForm.email
                }
                //console.log(JSON.stringify(params))
                this.isDisabledSave = true;
                service.haiBeiServerUpdateAgentInfo(params).then( res => {
                  if ( res.success ) {
                    //console.log(JSON.stringify(params,'======'));
                    setTimeout( () => {
                      this.$router.push({ name: 'main'});
                      this.isDisabledSave = false;
                      let headImg = document.getElementById('AG_head');
                      headImg.src = this.ruleForm.headerUrl;
                      let baseCookie = getCookie("baseInfo")||{};
                      baseCookie.head_img = this.ruleForm.headerUrl;
                      setCookie("baseInfo",baseCookie);
                    }, 800 );
                  } else {
                    this.isDisabledSave = false;
                    this.$message({type:'error',message: res.msg});
                  }
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          returnMain(){
            this.$router.push({ name: 'main'});
          }
        }
    };
</script>
<style scoped></style>
